<template>
  <view class="nucleic-acid-item">
    <view class="title">{{ itemData.network }}</view>
    <view class="info">
      <view class="detail-name info-item">
        <span>{{ itemData.address }}</span>
        <view class="go-btn" @click="gotoNavigation(itemData.lon, itemData.lat)"
          >立即前往</view
        >
      </view>

      <view class="phone info-item">
        <span>联系电话</span>
        <span class="phone-text">{{ itemData.phone }}</span>
      </view>

      <view class="open-time info-item">
        <span>开放时间</span>
        <span>{{ itemData.datetime }}</span>
      </view>

      <view class="area info-item">
        <span>所在区县</span>
        <span>{{ itemData.area }}</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    itemData: {
      type: Object, // 限制数据类型
      required: true, // 限制必须传值
    },
  },

  components: {},

  methods: {
    // 导航
    gotoNavigation(long, lat) {
      if (lat == "" || long == "") {
        uni.showToast({
          title: "请开启手机定位",
          icon: "none",
        });
        return false;
      }
      // #ifdef MP-WEIXIN
      const latitude = Number(lat);
      const longitude = Number(long);
      console.log(latitude, longitude);
      wx.openLocation({
        latitude,
        longitude,
        scale: 18,
      });
      // #endif
    },
  },
};
</script>

<style lang='scss' scoped>
.nucleic-acid-item {
  background: #fff;
  padding: 30rpx;
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }

  .info {
    margin-top: 30rpx;
    .go-btn {
      white-space: nowrap;
      padding: 6rpx 15rpx;
      color: #fff;
      background: $themeColor1;
      font-size: 24rpx;
      margin-left: 20rpx;
      align-self: flex-start;
    }

    .info-item {
      display: flex;
      justify-content: space-between;
      margin: 15rpx 0;
      span {
        font-size: 28rpx;
      }
      span:nth-child(1) {
        white-space: nowrap;
        margin-right: 30rpx;
      }
      &.phone {
        .phone-text {
          color: $themeColor3;
        }
      }
      &.detail-name {
        span:nth-child(1) {
          white-space: inherit;
        }
      }
    }
  }
}
</style>